<template>
  <div class="dr">
    <!-- 提示语 -->
    <div class="d1"><tab></tab></div>
    <!-- 渲染商品 -->
    <div class="box">
      <img
        v-if="$store.state.list.length == 0"
        src="/img/w/kon.png"
        class="img"
        alt=""
      />
      <div v-if="list.length != 0" class="d2">
        <table>
          <tr>
            <th>
              <input type="checkbox" v-model="check" @change="qx" />
              全选
            </th>
            <th>名称</th>
            <th></th>
            <th>单价</th>
            <th>数量</th>
            <th>小记</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item, index) in list" :key="index">
            <td>
              <input type="checkbox" v-model="item.check" />
            </td>
            <td>
              <div class="df"><img :src="item.productImg" alt="" /></div>
            </td>
            <td class="td">
              <div class="df1">{{ item.productName }}</div>
            </td>
            <td>{{ item.price }}</td>
            <td>{{ item.num }}</td>
            <td>
              <span class="ss1">{{ item.price * item.num }}</span>
            </td>
            <td><span @click="sc(item)">sc</span></td>
          </tr>
        </table>
      </div>
    </div>
    <!-- 底部tab -->
    <div class="tab">
      <div class="dx">
        <router-link to="/#" class="dx1" tag="div">继续购物</router-link>

        <div class="dx2">
          共<span class="sx">{{ $store.getters.zj.length }}</span
          >件商品 已选择 <span class="sx">{{ $store.getters.zj.sl }}</span
          >件
        </div>
        <div class="dxz">/</div>
        <div class="dx3">
          <span class="s1">合计:</span>
          <span class="s2">{{ $store.getters.zj.zf }}元</span>
        </div>
        <div class="dx4">去结算</div>
      </div>
    </div>
  </div>
</template>
<script>
import tab from "@/views/ht/home/zj/gwc2";
export default {
  components: { tab },
  beforeRouteEnter(to, from, next) {
    // ...判断是否登陆
    let token = sessionStorage.getItem("token");

    if (token == null) {
      // 没有登陆不可进入
      next("/home");
    }
    // 登陆则放行
    next();
  },
  mounted() {
    // 获取数据
    this.hq();
  },
  data() {
    return {
      check: false,
      list: [],
      zt: true,
    };
  },

  methods: {
    hq() {
      //  获取用户购物车列表
      this.$axios
        .post("/api/user/shoppingCart/getShoppingCart", {
          user_id: sessionStorage.getItem("token"),
        })
        .then((a) => {
          // 获取数据
          // 获取成功
          let { code: c, shoppingCartData: lists } = a;
          if (c == "001") {
            // 数据绑定模板 bian lian s
            this.list = lists;
            //
            console.log(this.list);
            this.list.map((a) => {
              return (a.productImg = `http://47.115.85.237:3000/${a.productImg}`);
              a.check = true;
            });
            //
            this.$store.commit("listx", this.list);
            this.list = this.$store.state.list;
          }
        });
    },
    sc(a) {
      //删除商品
      this.$axios
        .post("/api/user/shoppingCart/deleteShoppingCart", {
          user_id: sessionStorage.getItem("token"),
          product_id: a.productID,
        })
        .then((a) => {
          //
          let { code: c, msg: m } = a;
          // 删除成功
          if (c == "001") {
            // 弹框提示
            this.$notify({
              title: "成功",
              message: m,
              type: "success",
            });
            // 重新请求
            this.hq();
          }
        });
      console.log(a);
    },

    dj(a) {
      //
      console.log(a);
    },
    qx() {
      this.list.map((a) => {
        return (a.check = this.check);
      });
    },
  },
  watch: {
    list: {
      handler() {
        let s = 0;
        this.$store.commit("xz", this.list);
        this.list.map((a) => {
          if (a.check == true) {
            s++;
          }
        });
        if(s==this.list.length){
          this.check=true
        }else{
           this.check=!true
        }
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
.d2 {
  width: 100%;
  height: 490px;
  /* background: aquamarine; */
}
table {
  margin: 0;
  padding: 0;
  width: 100%;
}
th,
td {
  font-size: 15px;
  width: 14%;
  height: 70px;
  line-height: 70px;
  border-bottom: #f0f0f0 1px solid;
  text-align: center;
}
.ss1 {
  color: orangered;
}

.df {
  width: 70%;
  text-align: center;
  flex: 6;
  height: 100%;
}
img {
  width: 90%;
}
.img {
  width: 100%;
  height: 670px;
}
/* .td{
display: flex;
  width: 195%;
} */
.box {
  width: 100%;
  background: #f0f0f0;
}
.d2 {
  height: 70%;
  background: #fff;
}
.tab {
  width: 100%;
  margin-top: 40px;
  background: #f0f0f0;

  height: 70px;
  padding-bottom: 25px;
}
.dr {
  background: #f0f0f0;
}
.dx {
  width: 100%;
  background: #fff;
  height: 95%;
  overflow: hidden;
}
.dx div {
  width: 15%;
  text-align: center;
  line-height: 70px;

  display: inline-block;
  height: 101%;
  /* background: firebrick; */
}
.dx .dxz {
  width: 36.5%;
  color: #fff;
  background: #fff;
}
.dx .dx1 {
  font-size: 19px;
}
.dx .dx2 {
  color: #f0f0f0;
  width: 17%;
  height: 100%;
  color: rgb(36, 36, 19);
}
.dx .dx4 {
  font-size: 22px;
  width: 15%;
  height: 100%;
  color: beige;
  background: orangered;
}
.s1 {
  color: orangered;
  font-size: 15px;
}
.sx {
  color: orangered;
  font-size: 17px;
}
.s2 {
  color: orangered;
  font-size: 26px;
}
</style>